app.directive('alerts', function ($timeout) {
  return {
    restrict: 'E',
    template: '	<div class="notification"><alert ng-repeat="alert in alerts"'+
		'type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert></div>',
    scope: true, /*share scope between alerts directives*/
    link: function (scope) {
    scope.alerts = [];
 	scope.addAlert = function() {
		scope.alerts.push({msg : 'Another alert!'});
	};

    scope.$on('alert', function (event, alert) {
    	var newLength = scope.alerts.push({type: alert.type, msg: alert.message});
		
		$timeout(function() {
		    scope.alerts.splice((scope.alerts.length-1), 1);
		}, 2500);
      });
    }
  };
});